Entrada / input

Visión General del Componente

El componente Input en Emvi UI es un elemento versátil para capturar datos del usuario, manteniendo consistencia visual en prototipos Figma y producción mediante Tailwind. Ideal para formularios, campos de búsqueda y UI interactivas; está disponible tanto en versión gratuita como premium. Enfocado en claridad, accesibilidad (WCAG) y usabilidad en diferentes estados (predeterminado, foco, completado, error, deshabilitado), Emvi UI usa tokens como input.bg, input.border, input.focus, input.error para lograr coherencia visual.

Recopilando información del usuario

Los campos de entrada son vitales para recopilar información del usuario en varios contextos. Ya sea ingresando detalles personales, direcciones de entrega o enviando consultas, estos campos proporcionan una forma flexible para que los usuarios envíen sus respuestas. Son un componente clave en los formularios, haciendo posible recopilar información única y específica de cada usuario.

Versatilidad en el uso

Los campos de entrada son altamente versátiles y pueden usarse en muchas situaciones diferentes. Desde formularios de inicio de sesión y barras de búsqueda hasta formularios de comentarios y secciones de comentarios, los campos de entrada se adaptan a las necesidades de la aplicación. Pueden manejar texto, números, contraseñas, correos electrónicos y más, asegurando que todos los tipos de datos puedan capturarse y procesarse con precisión.

Mejorando la experiencia del usuario

Los campos de entrada mejoran la experiencia del usuario al hacer que la entrada de datos sea sencilla y eficiente. Las etiquetas claras, el texto de marcador de posición y la alineación adecuada de los campos guían a los usuarios a través del proceso, reduciendo errores y frustraciones. En el comercio electrónico, por ejemplo, los campos de entrada bien diseñados garantizan que los usuarios puedan completar sus compras de manera rápida y sencilla. Nuestro UI KIT incluye componentes de campos de entrada personalizables que pueden adaptarse a cualquier diseño, proporcionando una interfaz fluida y fácil de usar.

Tipos y Variantes

Outlined: borde limpio, estilo minimalista
Filled: fondo sutil para mayor énfasis
Con icono: icono opcional al inicio o final (ej. búsqueda, limpiar)
Multilínea (textarea): entrada de texto extendida
Deshabilitado: no editable, visualmente atenuado
Compatible con modos claro y oscuro.

Tamaños, Espaciado y Escala

SM — interfaces densas y compactas
MD — estándar equilibrado
LG — ideal para onboarding o entornos táctiles
Alturas consistentes (igual que el botón principal), ancho uniforme. Figma Auto Layout y utilidades Tailwind (h-10, px-3, gap-2) aseguran espaciado y accesibilidad (≥44×44 px).

Estados y Comportamiento

Default / Focus / Filled / Hover / Disabled / Error
Retroalimentación visual clara (anillo de foco, borde destacado)
Auto Layout y labels evitan problemas de alineación
Máscaras de entrada y validación mejoran precisión (teléfono, fecha)

Accesibilidad

Etiquetas visibles y descriptivas (no reemplazarlas por placeholder)
Etiquetas bien contrastadas
Diferenciar claramente campos obligatorios/opcionales
Mensajes de error debajo o a la derecha, vinculados por ARIA
Foco visible con focus-visible

Integración con Figma y Tailwind

Figma:
Variantes: default, foco, filled, deshabilitado, error
Slots para iconos configurables
Auto Layout con tokens para texto, borde, fondo, foco
Tailwind:
Layout básico: block w-full rounded-md border
Estados: focus:border-primary-500, focus:ring, disabled:bg-neutral-100
Responsive: sm:h-8, lg:px-4
Tokens: input.border, input.focus, input.bg

Buenas Prácticas

Formularios breves: menos campos visibles
Etiquetas top‑aligned para lecturas más rápidas
Errores debajo o a la derecha del campo
No usar placeholder como etiqueta
Usar máscaras locales (teléfono)
Alturas iguales que botones para buen ritmo visual